<ui:composition 
	xmlns="http://www.w3.org/1999/xhtml" 
	xmlns:h="http://java.sun.com/jsf/html" 
	xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:a4j="http://richfaces.org/a4j" 
    xmlns:rich="http://richfaces.org/rich"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:fn="http://java.sun.com/jsp/jstl/functions">

    <h:outputStylesheet> 
    
	    .pic-normal {     
		    width: 120px;     
		    border: none; 
		    }
		       
		.wrap1 {     
		    width: 140px;     
		    height: 100px;     
		    float: left; 
    	} 
    
    </h:outputStylesheet>  
           
    <br />       
    
    <a4j:outputPanel id="gallery">         
    
	    <h:graphicImage value="/images/insacosa1.jpg" alt="pic" border="0"/>         	    
	    <h:graphicImage value="/images/insacosa2.jpg" alt="pic" border="0"/>        
	    <h:graphicImage value="/images/insacosa3.jpg" alt="pic" border="0"/>         
	    <h:graphicImage value="/images/insacosa4.jpg" alt="pic" border="0"/>         	    
	    <h:graphicImage value="/images/insacosa5.jpg" alt="pic" border="0"/>        
	    <h:graphicImage value="/images/insacosa6.jpg" alt="pic" border="0"/>         
	    <h:graphicImage value="/images/insacosa7.jpg" alt="pic" border="0"/>         	    
	    <h:graphicImage value="/images/insacosa8.jpg" alt="pic" border="0"/>        
	    <h:graphicImage value="/images/insacosa9.jpg" alt="pic" border="0"/>         
	    <h:graphicImage value="/images/insacosa10.jpg" alt="pic" border="0"/>         	    
	    <h:graphicImage value="/images/insacosa11.jpg" alt="pic" border="0"/>        
	    <h:graphicImage value="/images/insacosa12.jpg" alt="pic" border="0"/>         
	    <h:graphicImage value="/images/insacosa13.jpg" alt="pic" border="0"/>         	    
	    <h:graphicImage value="/images/insacosa14.jpg" alt="pic" border="0"/>        
	    <h:graphicImage value="/images/insacosa15.jpg" alt="pic" border="0"/>          
	    <h:graphicImage value="/images/insacosa16.jpg" alt="pic" border="0"/>         	    
	    <h:graphicImage value="/images/insacosa17.jpg" alt="pic" border="0"/>        
	    <h:graphicImage value="/images/insacosa18.jpg" alt="pic" border="0"/>         
	    <h:graphicImage value="/images/insacosa19.jpg" alt="pic" border="0"/>         	    
	    <h:graphicImage value="/images/insacosa20.jpg" alt="pic" border="0"/>        
	    <h:graphicImage value="/images/insacosa21.jpg" alt="pic" border="0"/>  
   	    <h:graphicImage value="/images/insacosa22.jpg" alt="pic" border="0"/>         
	    <h:graphicImage value="/images/insacosa23.jpg" alt="pic" border="0"/>         	    
	    <h:graphicImage value="/images/insacosa24.jpg" alt="pic" border="0"/>        
	    <h:graphicImage value="/images/insacosa25.jpg" alt="pic" border="0"/>  
	      
    </a4j:outputPanel>       
    
    <br style="clear: both" />         
    
    <rich:jQuery selector="#gallery img" query="addClass('pic-normal')" />     
    <rich:jQuery selector="#gallery img"        
    query="wrap('&lt;div class=\'wrap1\'&gt;&lt;/div&gt;')" />     
    <rich:jQuery selector="#gallery img" event="mouseover"        
    query="jQuery(this).stop().animate({width:'180px'})" />     
    <rich:jQuery selector="#gallery img" event="mouseout"        
    query="jQuery(this).stop().animate({width:'120px'})" /> 
	
</ui:composition>
	
